<template>
	<view class="order">
		<view class="title u-flex">
			<view class="li" v-for="(item,index) in tabsList" :key="index" @click="tabsChange(index)">
				<view :class="[tabsIndex == index?'li-text-active':'li-text']">{{item.name}}</view>
				<image
					:src="tabsIndex == index?'https://qn.mtj.cdydsy.com/user_client/new-images/user-order-base.png':''"
					class="line"></image>
			</view>
		</view>
		<view class="order-content u-flex-between" v-show="tabsIndex == 0">
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=1')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/dfk.svg')"></image>
				<view class="li-text">待付款</view>
				<view class="li-number" v-if="orderTotal.unpaid">
					{{orderTotal.unpaid < 100?orderTotal.unpaid:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=2')">
				<image :src="$getImageUrl('/user_client/static/icons/order-status-2.png')" mode="aspectFit"
					class="li-image"></image>
				<view class="li-text">待发货</view>
				<view class="li-number" v-if="orderTotal.unshipped">
					{{orderTotal.unshipped < 100?orderTotal.unshipped:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=3')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/dsh.svg')"></image>
				<view class="li-text">待收货</view>
				<view class="li-number" v-if="orderTotal.not_received">
					{{orderTotal.not_received < 100?orderTotal.not_received:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=4')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/pj.svg')"></image>
				<view class="li-text">待评价</view>
				<view class="li-number" v-if="orderTotal.not_comment">
					{{orderTotal.not_comment < 100?orderTotal.not_comment:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order-refund/refund-list')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/sh.svg')"></image>
				<view class="li-text">退货/售后</view>
				<view class="li-number" v-if="orderTotal.refund_number">
					{{orderTotal.refund_number < 100?orderTotal.refund_number:'99+'}}
				</view>
			</view>
		</view>
		<view class="order-content u-flex-between" v-show="tabsIndex == 1">
			<view class="li" @click="$navigateTo('/subPackages/group-buying-order/index?current=1')">
				<image :src="$getImageUrl('/user_client/static/icons/pintuan.png')" mode="aspectFit" class="li-image">
				</image>
				<view class="li-text">拼团中</view>
				<view class="li-number" v-if="orderTotal.activity_centre_total">
					{{orderTotal.activity_centre_total < 100?orderTotal.activity_centre_total:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/group-buying-order/index?current=2')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/dsh.svg')"></image>
				<view class="li-text">待收货</view>
				<view class="li-number" v-if="orderTotal.not_received">
					{{orderTotal.not_received < 100?orderTotal.not_received:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/group-buying-order/index?current=3')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/pj.svg')"></image>
				<view class="li-text">待评价</view>
				<view class="li-number" v-if="orderTotal.not_comment">
					{{orderTotal.not_comment < 100?orderTotal.not_comment:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order-refund/refund-list')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/sh.svg')"></image>
				<view class="li-text">退货/售后</view>
				<view class="li-number" v-if="orderTotal.refund_number">
					{{orderTotal.refund_number < 100?orderTotal.refund_number:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/group-buying-order/index')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/images/user/qb.svg')"></image>
				<view class="li-text">全部</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "order",
		data() {
			return {
				tabsIndex: 0,
				tabsList: [{
						name: '我的订单'
					},
					{
						name: '拼团订单'
					}
				]
			};
		},
		// 此处定义传入的参数
		props: {
			orderTotal: {
				type: Object,
				default: {},
			},
		},
		mounted() {},
		methods: {
			tabsChange(index) {
				this.tabsIndex = index
				this.$emit('tabsChange', index)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.order {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 24rpx;

		.title {

			.li {
				position: relative;
				margin-right: 46rpx;

				.li-text {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #A7A7A7;
					position: relative;
					z-index: 2;
				}

				.li-text-active {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					position: relative;
					z-index: 2;
				}

				.line {
					width: 124rpx;
					height: 12rpx;
					display: block;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 1;
				}
			}
		}

		.order-content {
			padding: 40rpx 10rpx 0;

			.li {
				width: 16%;
				position: relative;

				.li-image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0 auto;
				}

				.li-text {
					padding-top: 15rpx;
					line-height: 1;
					font-size: 22rpx;
					color: #020202;
					text-align: center;
				}

				.li-number {
					min-width: 28rpx;
					padding: 0 5rpx;
					height: 28rpx;
					line-height: 28rpx;
					position: absolute;
					top: -10px;
					right: 5px;
					border-radius: 100rpx;
					color: #FFFFFF;
					font-size: 18rpx;
					text-align: center;
					background-color: #CC242B;
					box-sizing: border-box;
				}
			}
		}
	}
</style>